<!-- @@master  = ../../../tpl/base.html-->
<!-- @@block  =  head-->
<style media="screen">
  ul.post-view{
    float: right;
  }
  ul.post-view li{
    text-align: center;
    padding: 10px 20px;
    width: calc(100% / 3 - 10px);
    width: -webkit-calc(100% / 3 - 10px);
    margin: 0px 5px;
    float: left;
  }
  ul.post-view li:hover, ul.post-view li.active{
    border-radius: 5px;
    color: white;
  }
</style>
<!-- @@close-->
<!-- @@block  =  content-->
<section class="panel panel-default">
<header class="panel-heading">
  数据报告
<span class="tools pull-right">
    <a class="fa fa-chevron-down" href="javascript:;"></a>
    <a class="fa fa-times" href="javascript:;"></a>
</span>
</header>
<div class="panel-body">
    <table class="display table table-bordered" id="table">
      <tr>
        <th>今日消费</th>
        <th>昨日消费</th>
        <th>7天消费</th>
        <th>30天消费</th>
        <th>余额</th>
      </tr>
    </table>
<ul class="post-view" style="width:400px">
    <li class="active" data-day="7">最近7天</li>
    <li data-day="30">最近30天</li>
    <li data-day="-1">其他时间</li>
</ul>
<div class="chart"></div>
<div class="table-box" style="margin-top:40px;">
  <table class="display table table-bordered" id="data-table"></table>
</div>
</div>
</section>
<!-- @@close-->
<!-- @@block  =  foot-->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">选择时间</h4>
      </div>
      <div class="modal-body">
        <div class="form">
            <form class="cmxform form-horizontal adminex-form" id="chooseDate" method="get" action="">
              <div class="form-group ">
                  <label class="control-label col-sm-3">开始时间</label>
                  <div class="col-sm-6">
                      <input size="16" type="text" readonly name="time_begin" class="form_date form-control">
                  </div>
              </div>
              <div class="form-group ">
                  <label class="control-label col-sm-3">结束时间</label>
                  <div class="col-sm-6">
                      <input size="16" type="text" readonly name="time_end" class="form_date form-control">
                      <button type="sumbit" style="display:none"></button>
                  </div>
              </div>
            </form>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">确认</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="../js/chart/Chart.js"></script>
<script type="text/javascript">
(function() {
    "use strict";
    var oTable = $("#data-table").dataTable({
      "bSort":false,
      "bProcessing":true,
      "bAutoWidth":false,
      "bFilter":false,
      "bPaginate":false,
      "aoColumns": [
          {"sTitle": "日期","mData": "date"},
          {"sTitle": "计划量","mData": "num_plan"},
          {"sTitle": "完成量","mData": "num_result"},
          {"sTitle": "完成率","mData": "num_plan"},
          {"sTitle": "消费金额","mData": "amount"},
      ],
      "aoColumnDefs": [
        {
          "aTargets": [ 4 ],
          "mRender": function ( data, type, full ) {
            return "￥"+(data / 100).toFixed(2);
          }
        }
      ],
      "fnRowCallback":function(nRow,aData,iDataIndex){
          if(aData.num_plan){
            $('td:eq(3)',nRow).html((aData.num_result/aData.num_plan*100).toFixed(2)+"%");
          }else{
            $('td:eq(3)',nRow).html("0.00%");
          }
          return nRow;
      },
    });
    var keys = ['today','yesterday','week','month','balance'];
    myHttp.getJSON("consume/statistics",function(data){
      var string = '<tr>'
        for(var i=0;i<keys.length;i++){
          var key = keys[i];
          if(key != "balance"){
            string += '<td>￥'+(data[key]/100).toFixed(2)+'</td>';
          }else{
            string += '<td>￥'+(data[key]/100).toFixed(2)+'    <a href="/user/recharge.html#user-recharge">充值</a></td>';
          }
        }

        string +='</tr>';
        $("#table").append(string);
    });
    $(document).on("click",".post-view >li",function(){
      $(".post-view >li").removeClass("active");
      $(this).addClass("active");
      var day = $(this).data("day");
      getChart(day);
    });
    var getConsume = function(time_begin,time_end){
      myHttp.getJSON("consume/?time_begin="+time_begin+"&time_end="+time_end,function(data){
        var labels = [];
        var amounts = [];
        for(var i =0;i<data.length;i++){
          var item = data[i];
          labels.push(item.date);
          amounts.push(item.amount / 100);
        }
        $(".chart").html('<canvas id="myChart" width="400" height="200"></canvas>');
        var myChart = new Chart($("#myChart"), {
            type: 'line',
            data: {
                labels: labels,
              datasets: [
                  {
                      label: "消费记录",
                      lineTension: 0.1,
                      backgroundColor: "rgba(75,192,192,0.4)",
                      borderColor: "rgba(75,192,192,1)",
                      borderCapStyle: 'butt',
                      pointRadius: 1,
                      pointHitRadius: 10,
                      data: amounts,
                      spanGaps: false,
                  }
              ]
            }
        });

        oTable.fnClearTable();
        data.reverse();
        oTable.fnAddData(data);
      });
    }
    var getChart = function(day){
      if(day == -1){
        $("#myModal").modal("show");
        return;
      }
      var now = new Date();

      var time_end = myHttp.getDate(now);
      now.setTime(now.getTime()-(day-1)*24*3600*1000);
      var time_begin = myHttp.getDate(now);
      getConsume(time_begin,time_end);
    };
    $("#chooseDate").validate({
      submitHandler:function(form){
        $("#myModal").modal("hide");
        getConsume(form.time_begin.value,form.time_end.value);
      }
    });
    $(document).on("click",".btn-primary",function(){
      $("#myModal").modal("hide");
      getConsume(chooseDate.time_begin.value,chooseDate.time_end.value);
    });
    getChart(7);

    var clearCanvas = function(){
      var canvas = $("#myChart")[0];
      var context = canvas.getContext("2d");
      context.clearRect(0,0,canvas.width,canvas.height);
    }
})(jQuery);
</script>
<!-- @@close-->
